<template>
  <div class="size-full p-4">
    <div class="size-full flex items-center justify-center">
      <div class="text-5xl">功能开发中...</div>
    </div>
    <!-- <a-row :gutter="[16, 16]">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="24">
        <div class="gutter-box">
          <a-card>
            <a-card-grid style="width: 25%; text-align: center"
              >Content</a-card-grid
            >
            <a-card-grid
              style="width: 25%; text-align: center"
              :hoverable="false"
              >Content</a-card-grid
            >
            <a-card-grid style="width: 25%; text-align: center"
              >Content</a-card-grid
            >
            <a-card-grid style="width: 25%; text-align: center"
              >Content</a-card-grid
            >
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="24">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="16">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">
          <a-card>
            <p>Card content</p>
          </a-card>
        </div>
      </a-col>
    </a-row> -->
  </div>
</template>

<script setup lang="ts">
// 组件命名
defineOptions({
  name: 'Home',
});

// 导入Vue组合式API
import { ref, onMounted, onBeforeUnmount, useAttrs, useSlots } from 'vue';

// 定义props及类型
interface Props {
  title: string;
  count?: number;
}
const props = defineProps<Props>();

// 定义emit事件，带类型约束
const emit = defineEmits<{
  (event: 'change', value: string): void;
  (event: 'update', value: number): void;
}>();

// 访问attrs和slots
const attrs = useAttrs();
const slots = useSlots();

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
  console.log('attrs:', attrs);
  console.log('slots:', slots);
});

onBeforeUnmount(() => {
  console.log('组件即将卸载');
});
</script>

<style scoped></style>

